<template>
  <div class="map-home" @click.self="blackClick">
    <div class="select_screen d-start">
      <span>项目状态:</span>
      <el-cascader
        :options="xmstate"
        size="small"
        :props="prop1"
        v-model="formField.xmzt"
        collapse-tags
        style="width: 150px"
        @visible-change="elCascaderOnlick"
        @expand-change="elCascaderOnlick"
        clearable
      ></el-cascader>
      <!-- @visible-change="getData" -->
      <span>行政区划:</span>
      <el-cascader
        size="small"
        :options="cityList"
        :props="props"
        v-model="selectleap"
        popper-class="citylist"
        style="width: 250px"
        ref="elcascader"
        collapse-tags
        clearable
        @change="handleChange"
        @visible-change="elCascaderOnlick"
        @expand-change="elCascaderOnlick"
      >
        <template slot-scope="{ data }">
          <span>{{ data.name }}</span>
        </template>
      </el-cascader>
      <!-- <select-box :citylist="cityList" /> -->
      <span>行政等级:</span>
      <el-cascader
        :options="xmLevel"
        size="small"
        :props="prop1"
        style="width: 150px"
        collapse-tags
        clearable
        v-model="formField.xzdj"
        @visible-change="elCascaderOnlick"
        @expand-change="elCascaderOnlick"
      ></el-cascader>
      <!-- @visible-change="getData" -->
      <span>路面类型:</span>
      <el-cascader
        :options="lmstate"
        size="small"
        :props="prop1"
        style="width: 180px"
        collapse-tags
        clearable
        v-model="formField.lmlx"
        @visible-change="elCascaderOnlick"
        @expand-change="elCascaderOnlick"
      ></el-cascader>
      <!-- @visible-change="getData" -->
    </div>

    <div class="viewDiv2" id="viewDiv2"></div>

    <div class="left_pop" :style="!isleftpop ? 'left:-320px' : ''">
      <div
        class="lbtn"
        :class="isleftpop ? '' : 'show'"
        @click="isleftpop ? (isleftpop = false) : (isleftpop = true)"
      >
        <span></span>
        <!-- <el-button
          class="close"
          size="medium"
          type="primary"
          @click="isleftpop = false"
          >×</el-button
        > -->
      </div>

      <div class="list">
        <div class="searchs" style="display: block">
          <div class="box">
            <form action="">
              <div class="items">
                <div class="text">项目名称：</div>
                <div class="input">
                  <!-- <input type="text" placeholder="请输入名称" /> -->
                  <el-input
                    class="inline-input"
                    v-model="project.xmmc"
                    placeholder="请输入名称"
                    size="small"
                    style="width: 208px"
                  ></el-input>
                </div>
              </div>
              <div class="items">
                <div class="text">项目状态：</div>
                <div class="input">
                  <!-- <el-cascader
                    :options="xmstate"
                    size="small"
                    :props="prop1"
                    v-model="formField.xmzt"
                    collapse-tags
                    style="width: 150px"
                    @visible-change="elCascaderOnlick"
                    @expand-change="elCascaderOnlick"
                    clearable
                  ></el-cascader> -->
                  <el-select
                    v-model="project.xmzt"
                    size="small"
                    placeholder="请选择"
                    style="width: 208px"
                  >
                    <el-option value="未开工">未开工</el-option>
                    <el-option value="新建">新建</el-option>
                    <el-option value="续建">续建</el-option>
                    <el-option value="交工">交工</el-option>
                    <el-option value="竣工">竣工</el-option>
                  </el-select>
                  <!-- <select name="" id="">
                    <option value="">请选择</option>
                    <option
                      :value="item.values"
                      v-for="item in xmztTable"
                      :key="item.id"
                    >
                      {{ item.values }}
                    </option>
                  </select> -->
                </div>
              </div>
              <div class="btn">
                <button type="button" class="s" @click="leftSearch()">
                  查询
                </button>
                <button type="button" plain class="c" @click="leftReset()">
                  重置
                </button>
              </div>
            </form>
          </div>
        </div>
        <div
          class="noResult"
          style="text-align: center; font-size: 14px; color: #999"
          v-if="!plist"
        >
          没有更多了
        </div>
        <div class="listbox">
          <div class="item" v-for="item in plist" :key="item.id">
            <div class="title">
              <!-- <el-tooltip :content="item.xmmc" placement="top-start"> -->
              <span>{{ item.xmmc }}</span>
              <!-- </el-tooltip> -->
            </div>
            <div class="desc">
              <span class="status">{{ item.xmzt }}</span>
              <!-- <span class="status" v-if="item.lxbm">
              <el-tooltip :content="item.lxbm" placement="top-start">
                <span>{{ item.lxbm }}</span>
              </el-tooltip>
            </span> -->
              <span>总里程:{{ item.wujl }}km</span>
            </div>
            <div class="dw">
              <i style="cursor: pointer" @click="createBox(item)">
                <img src="@/assets/img/ic_location_blue.png" alt />
              </i>
            </div>
            <!-- <div class="dw" v-if="item.lines.length > 0">
              <i style="cursor: pointer" @click="createBox(item)">
                <img src="@/assets/img/ic_location_blue.png" alt />
              </i>
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <div class="right_pop" :class="is_sq ? 'right_pops' : ''">
      <div class="jjh">
        <div @click="setWindos(0)" v-if="!is_qp">
          <img src="@/assets/img/qp0.png" alt="" />
        </div>
        <div @click="setWindos(1)" v-else>
          <img src="@/assets/img/qp1.png" alt="" />
        </div>
      </div>
      <div class="jjh2">
        <div><img src="@/assets/img/jh1.png" @click="setMapZoom(1)" /></div>
        <div><img src="@/assets/img/jh0.png" @click="setMapZoom(0)" /></div>
      </div>
      <div
        class="button chartshow"
        :class="is_sq ? 'chartshow2' : ''"
        @click="is_sq ? (is_sq = false) : (is_sq = true)"
      >
        <span></span>
      </div>
      <div class="top_">
        <div class="_blue"></div>
        <div class="_white"></div>
        <div class="_center d-center">
          <div class="data_tab">
            <div
              style="color: rgba(35, 138, 245, 1)"
              class="justy"
              :title="tableData.zlc + 'km'"
            >
              {{ tableData.zlc || 0 }}
            </div>
            <!-- <div @click="is_sq='true'">建设里程(km)</div> -->
            <div>建设里程(km)</div>
          </div>
          <div class="data_tab">
            <div style="color: rgba(255, 156, 0, 1)">
              {{ tableData.xmgs || 0 }}
            </div>
            <div>项目个数(个)</div>
          </div>
          <div class="data_tab">
            <div
              :title="tableData.gsze + '万元'"
              style="color: rgba(37, 184, 61, 1)"
              class="justy"
            >
              {{ ztz || 0 }}
            </div>
            <div>概算投资规模({{ money }}元)</div>
          </div>
        </div>
      </div>
      <div class="tab">
        <span :class="{ active: isactive == 1 }" @click="isactive = 1"
          >行政区划</span
        >
        <span :class="{ active: isactive == 2 }" @click="isactive = 2"
          >项目状态</span
        >
        <span
          :class="{ active: isactive == 3 }"
          @click="
            isactive = 3;
            initEcharts();
          "
          >技术等级</span
        >
        <span
          :class="{ active: isactive == 4 }"
          @click="
            isactive = 4;
            initEcharts();
          "
          >行政等级</span
        >
        <span :class="{ active: isactive == 5 }" @click="isactive = 5"
          >前期总结</span
        >
      </div>
      <div class="main-home" v-show="isactive == 1">
        <div class="title">
          <i></i>
          <span>项目数(个)</span>
        </div>
        <div class="main-charts">
          <div class="lines one">
            <div style="display: flex; justify-content: space-between">
              <span
                @click="
                  getindex('黑龙江省', 1);
                  isleftpop = true;
                "
                >黑龙江省
              </span>
              <span class="nums">{{ maxCity }}</span>
            </div>
            <div class="progress">
              <el-progress
                :percentage="100"
                :stroke-width="16"
                :format="format"
              ></el-progress>
            </div>
          </div>

          <div class="lines one" v-for="item in cityTable" :key="item.adcode">
            <div style="display: flex; justify-content: space-between">
              <span
                @click="
                  getindex(item.name, 1);
                  isleftpop = true;
                "
                >{{ item.name }}
              </span>
              <!-- <span
                @click="
                  getindex(item.name, 1);
                  getProject(item);
                "
                >{{ item.name }}
              </span> -->
              <span class="nums">{{ item.projects }}</span>
            </div>
            <div class="progress">
              <el-progress
                :percentage="item.project || 0"
                :stroke-width="16"
                :format="format"
              ></el-progress>
            </div>
          </div>
        </div>
      </div>
      <div class="main-home tmain-home" v-show="isactive == 2">
        <div class="title">
          <i
            style="background: linear-gradient(90deg, #47d15f 0%, #02b821 100%)"
          ></i>
          <span style="color: rgba(37, 184, 61, 1); margin-right: 10px"
            >概算投资（万元）</span
          >
          <i></i>
          <span style="color: rgba(2, 154, 255, 1)">建设里程（km）</span>
        </div>
        <div class="main-charts">
          <div
            class="lines d-between two"
            v-for="item in xmztTable"
            :key="item.id"
          >
            <div class="left-t d-between">
              <span
                @click="
                  getindex(item.keys, 2);
                  isleftpop = true;
                "
                >{{ item.keys }}</span
              >
              <i>
                <img src="@/assets/img/home-left.png" alt />
              </i>
            </div>
            <div class="progress">
              <el-progress
                style="height: 10px !important"
                :percentage="item.gsze || 0"
                :color="'rgb(37, 184, 61)'"
                :stroke-width="15"
                :format="format1"
                class="progress-green"
              ></el-progress>
              <el-progress
                style="margin-top: 13px; height: 10px !important"
                :percentage="item.zlc || 0"
                :stroke-width="15"
                :format="format2"
              ></el-progress>
            </div>
          </div>
        </div>
      </div>
      <div class="main-home" v-show="isactive == 3">
        <div class="first-echart" ref="ref1"></div>
        <span style="font-size: 12px; padding: 12px">技术等级(km)</span>
        <div class="second-echart" ref="ref2"></div>
      </div>
      <div class="main-home" v-show="isactive == 4">
        <div class="three-echart d-between">
          <div
            class="one"
            v-for="(item, index) in xzdjTable.label"
            :key="index"
            @click="
              getindex(item, 3);
              isleftpop = true;
            "
          >
            <div class="a">{{ item }}</div>
            <el-progress
              :percentage="
                xzdjTable.datas[0] + xzdjTable.datas[1] + xzdjTable.datas[2]
                  ? parseFloat(
                      (
                        (xzdjTable.datas[index] /
                          (xzdjTable.datas[0] +
                            xzdjTable.datas[1] +
                            xzdjTable.datas[2])) *
                        100
                      ).toFixed(2)
                    )
                  : 0
              "
              :stroke-width="10"
              type="dashboard"
            ></el-progress>
          </div>
        </div>
        <div class="four-echart" ref="ref3"></div>
      </div>
      <div class="main-home" v-show="isactive == 5">
        <div class="title">
          <i></i>
          <span>项目数(个)</span>
        </div>
        <div class="main-charts" v-if="qqlist.length > 0">
          <div class="lines one"  v-for="(item,index) in qqlist" :key="index">
            <div style="display: flex; justify-content: space-between">
              <span>{{item.name}}</span>
              <span class="nums">{{ item.nums}}</span>
            </div>
            <div class="progress">
              <el-progress :percentage="item.scale" :format="format"></el-progress>
            </div>
          </div>
        </div>
      </div>
    </div>
    <lotDialog
      :dialogFormVisible1="dialogFormVisible1"
      @close="close1"
      :item="item"
      :inner="inner"
      :Xscode="Xscode"
      :xmmc="xmmc"
    />
  </div>
</template>

<script>
import { loadCss, loadModules } from "esri-loader";
import { debounce } from "@/plugins/common";
import lotDialog from "./dialog/lotDialog.vue";
import store from "@/store";
// import selectBox from "./dialog/selectBox.vue";
export default {
  name: "homeMap",
  components: {
    lotDialog,
    // selectBox
  },
  data() {
    return {
      qqlist: [],
      graphics: {},
      store,
      is_qp: false,
      projectXmzt: "",
      project: {},
      isleftpop: false,
      plist: {},
      is_sq: false,
      imgs: require("../../assets/img/dot_end.png"),
      imgs2: require("../../assets/img/dot_start.png"),
      page: 1,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      isactive: 1,
      gisConstructor: {}, //gis 构造函数
      gisInstance: {}, // gis 实例
      layersInstance: {},
      UIInstance: {},
      gisModules: [
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/layers/TileLayer",
        "esri/layers/FeatureLayer",
        "esri/widgets/LayerList",
        "esri/widgets/AreaMeasurement2D",
        "esri/widgets/DistanceMeasurement2D",
        "esri/widgets/Zoom",
        "esri/widgets/Zoom/ZoomViewModel",
        "esri/geometry/Point",
        "esri/Graphic",
        "esri/tasks/QueryTask",
        "esri/tasks/support/Query",
        "esri/geometry/SpatialReference",
        "esri/geometry/Extent",
        "esri/symbols/TextSymbol",
        "esri/symbols/PictureMarkerSymbol",
        "esri/Color",
        "esri/symbols/Font",
        "esri/tasks/IdentifyTask",
        "esri/tasks/support/IdentifyParameters",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch/SketchViewModel",
        "esri/views/2d/draw/Draw",
        "esri/geometry/Polygon",
        "esri/core/watchUtils",
        "esri/core/urlUtils",
        "esri/identity/IdentityManager",
        "esri/identity/ServerInfo",
        "esri/widgets/Legend",
        "esri/geometry/support/webMercatorUtils",
      ],
      options: {
        url: "https://js.arcgis.com/4.15/",
        // url: this.$jsApi + "arcgis_js_api/library/4.14/init.js"
      },
      layerUrl: this.$map + "arcgis/rest/services/Gis2013_PROJ_LD/MapServer/",
      bgUrl: this.$map + "arcgis/rest/services/BeiJingProj/MapServer/",
      xmmc: "",
      items: null,
      resultData: null,
      img3: require("../../assets/img/infobox-close.png"),
      img4: require("../../assets/img/ic_location_blue.png"),
      img5: require("../../assets/img/ic_info.png"),
      xm_id: null,
      item: {},
      inner: [],
      Xscode: [],
      xmstate: [],
      lmstate: [],

      xmLevel: [
        {
          values: "国道",
        },
        {
          values: "省道",
        },
        {
          values: "农村公路（林下经济路）",
        },
      ],
      cityList: [],
      District: [], //区县
      selectleap: [],
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        label: "name",
        value: "name",
        multiple: true,
        checkStrictly: true,
      },
      gcdd_sj: null,
      gcdd_qx: null,
      formField: {
        xmzt: [],
        lmlx: [],
        xzdj: [],
      },
      prop1: { multiple: true, label: "values", value: "values" },
      tableData: {},
      cityTable: [],
      xmztTable: [],
      jsdjTable: [],
      xzdjTable: [],
      money: "万",
      maxCity: 0,
      maxXmztZlc: 0,
      maxXmztGsze: 0,
      echarts1: null,
      echarts2: null,
      echarts3: null,
      echarts4: null,
      level1: "",
      mapReady: false,
      projectLine: [],
      projectCount: 0,
    };
  },
  mounted() {
    this.$get("/api/index/codes", { pid: 1 }).then((res) => {
      if (res.code == 200 && res.data) {
        this.xmstate = res.data.list;
      }
    });
    this.$get("/api/index/codes", { pid: 31 }).then((res) => {
      if (res.code == 200 && res.data) {
        this.lmstate = res.data.list;
      }
    });
    this.$get("api/project/getCitys").then((res) => {
      if (res.code == 200 && res.data) {
        this.cityList = res.data;
        // console.log(this.cityList);
      }
    });
    this.$get("/api/index/codes", { pid: 17 }).then((res) => {
      if (res.code == 200 && res.data) {
        this.inner = res.data.list;
      }
    });
    this.$get("/api/index/codes", { pid: 25 }).then((res) => {
      if (res.code == 200 && res.data) {
        this.Xscode = res.data.list;
      }
    });
    // this.initHome()
    this.search();
    this.getQqgzzj();
    this.$Bus.$on("refresh", () => {
      //项目库数据改变触发
      this.search();
    });
    this.init();
    let that = this;
    window.closePop = function () {
      that.gisInstance.view.graphics.items = that.gisInstance.view.graphics.items.filter(
        (v) => {
          return !("attr" in v);
        }
      );
      var dom = document.querySelectorAll(".pulse");
      if (dom.length > 0) {
        dom.forEach((v) => {
          v.remove();
        });
      }
      var div = document.querySelectorAll(".poptemplate");
      if (div.length > 0) {
        div.forEach((v) => {
          v.remove();
        });
      }
    };
    window.showForm = function () {
      that.dialogFormVisible1 = true;
    };
    window.setMapZooms = function (x, y) {
      that.gisInstance.view.goTo({
        target: [x, y],
      });
      that.gisInstance.view.zoom = 5;
    };
    // this.$Bus.$on("initHome", this.initHome);
  },
  methods: {
    getQqgzzj(){
      let form = {};
      for (let k in this.formField) {
        form[k] = this.formField[k].join(",");
      }
      form.gcdd_sj = this.gcdd_sj;
      form.gcdd_qx = this.gcdd_qx;

      // form
      if (this.selectleap.length == 0) {
        form.gcdd_sj = null;
        form.gcdd_qx = null;
      }
      this.$get("/api/index/getQqgzzj", form).then((res) => {
        if (res.code == 200) {
          this.qqlist = res.data;
        }
      });
    },
    setWindos(type) {
      var center = {
        x: this.gisInstance.view.center.longitude,
        y: this.gisInstance.view.center.latitude,
      };
      this.store.commit("removeState");
      if (type == 0) {
        this.is_sq = true;
        this.is_qp = true;
        this.isleftpop = false;
        this.gisInstance.view.goTo({
          target: [center.x - 2, center.y],
        });
      } else {
        this.is_sq = false;
        this.is_qp = false;
        // this.isleftpop = true;
        this.gisInstance.view.goTo({
          target: [center.x + 2, center.y],
        });
      }
    },
    // setMapZooms(x,y){
    //   this.gisInstance.view.goTo({
    //       target: [x, y],
    //     });
    //   this.gisInstance.view.zoom = 10;
    // },
    setMapZoom(type) {
      if (type == 0) {
        if (this.gisInstance.view.zoom <= 1) return;
        this.gisInstance.view.zoom = this.gisInstance.view.zoom - 1;
      } else {
        if (this.gisInstance.view.zoom >= 12) return;
        this.gisInstance.view.zoom = this.gisInstance.view.zoom + 1;
      }
    },
    leftReset() {
      this.formField.xmzt = [];
      this.formField.xmmc = [];
      this.project.xmzt = "";
      this.project.xmmc = "";
      this.search();
    },
    leftSearch() {
      // if (this.project.xmzt) {
      this.formField.xmzt = [this.project.xmzt];
      // }
      // if (this.project.xmmc) {
      this.formField.xmmc = [this.project.xmmc];
      // }
      this.search();
    },
    getProject(item) {
      this.plist = {};
      var param = {
        name: item.name,
      };
      this.$get("/api/index/getProjects", param).then((res) => {
        if (res.code == 200) {
          this.isleftpop = true;
          this.plist = res.data;
        }
      });
    },
    getindex(name, status) {
      if (status == 1) {
        if (name == "黑龙江省") {
          if (this.selectleap.length <= 0) {
            return;
          }
          this.gcdd_sj = "";
          this.selectleap = [];
          this.gisInstance.view.goTo({
            target: [130.63, 48.75],
          });
          this.gisInstance.view.zoom = 2;
        } else {
          this.gcdd_sj = name;
          this.selectleap = [name];
          this.cityList.forEach((v) => {
            if (v.name == name) {
              this.gisInstance.view.goTo({
                target: [parseFloat(v.lng), parseFloat(v.lat)],
              });
              this.gisInstance.view.zoom = 4;
            }
          });
        }

        this.search();
      }
      if (status == 2) {
        this.formField.xmzt = [name];
      }
      if (status == 3) {
        this.formField.xzdj = [name];
      }
    },
    initEcharts() {
      if (this.isactive == 3) {
        this.$nextTick(() => {
          this.echarts1 = this.$echarts.init(this.$refs.ref1);
          this.echarts2 = this.$echarts.init(this.$refs.ref2);
          this.echarts1.setOption(this.option1());
          this.echarts2.setOption(this.option2());
          // this.echarts1.resize();
        });
      }
      if (this.isactive == 4) {
        var that = this;
        this.$nextTick(() => {
          this.echarts3 = this.$echarts.init(this.$refs.ref3);
          this.echarts3.setOption(this.option3());
          this.echarts3.on("click", function (params) {
            if (params.componentType == "xAxis") {
              that.formField.xzdj = [params.value];
            } else {
              that.formField.xzdj = [params.name];
            }
          });
          // this.echarts3.on("click", function (param) {
          //   that.formField.xzdj = [param.name];
          // });
        });
      }
    },
    option1() {
      var option = {
        tooltip: {
          trigger: "item",

          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: [
          {
            bottom: 10,
            data: this.jsdjTable.label,
            textStyle: {
              color: "#00D9D5",
            },
          },
        ],
        calculable: true,
        series: [
          {
            name: "道路占比",
            type: "pie",
            radius: ["40%", "55%"],
            // center: ["50%", "35%"],
            // roseType: "area",
            // roseType: 'radius',
            label: {
              normal: {
                show: true,
                formatter: "{d}%",
              },
            },
            data: this.jsdjTable.datas,
            color: [
              "rgb(45, 102, 254)",
              "rgb(33, 202, 168)",
              "rgb(241, 102, 101)",
              "rgb(252, 192, 46)",
              "rgb(118, 196, 94)",
            ],
          },
        ],
      };
      return option;
    },
    option2() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{b} : {c} km",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
        },
        xAxis: {
          type: "category",
          data: this.jsdjTable.label,
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              color: "#2ec7c9",
            },
            label: {
              show: true,
              position: "inside",
            },
            data: this.jsdjTable.datas,
          },
        ],
      };
    },
    option3() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{b} : {c} km",
        },
        grid: {
          left: "0%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
        },
        xAxis: {
          type: "category",
          data: this.xzdjTable.label,
          triggerEvent: true,
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              color: "#918dcf",
            },
            label: {
              show: true,
              position: "inside",
            },
            data: this.xzdjTable.datas,
          },
        ],
      };
    },
    format(percentage) {
      // console.log(percentage,456456);
      return Math.round((percentage / 100) * this.maxCity);
    },
    format1(percentage) {
      return parseFloat(((percentage / 100) * this.maxXmztGsze).toFixed(4));
    },
    format2(percentage) {
      return parseFloat(((percentage / 100) * this.maxXmztZlc).toFixed(4));
    },
    // getData(value) {
    //   if (!value) {
    //     this.search();
    //   }
    // },
    search: debounce(function () {
      // this.isleftpop=false;
      let form = {};
      // this.cityTable = [];

      for (let k in this.formField) {
        form[k] = this.formField[k].join(",");
      }
      form.gcdd_sj = this.gcdd_sj;
      form.gcdd_qx = this.gcdd_qx;

      // form
      if (this.selectleap.length == 0) {
        form.gcdd_sj = null;
        form.gcdd_qx = null;
      }
      // if (this.selectleap.slice(1).length == 0) {
      //   form.gcdd_qx = null;
      // }
      this.$get("api/index/getIndex", form).then((res) => {
        if (res.code == 200 && res.data) {
          this.getQqgzzj();
          this.page = 1;
          this.projectXmzt = res.data.projectlistids;
          if (this.gisInstance.view) {
            this.gisInstance.view.graphics.removeAll();
          }
          this.tableData = res.data;
          this.xmztTable = res.data.xmzt;
          this.jsdjTable = res.data.jsdj;
          this.xzdjTable = res.data.xzdj;
          this.cityTable = res.data.citys;
          this.plist = res.data.projectlist;

          // let maxCity = Math.max(
          //   ...res.data.citys.map((v) => {
          //     return v.project;
          //   })
          // );
          let maxCity = 0;
          res.data.citys.map((v) => {
            maxCity = maxCity + v.project;
          });

          let maxXmztGsze = Math.max(
            ...res.data.xmzt.map((v) => {
              return v.gsze;
            })
          );
          let maxXmztZlc = Math.max(
            ...res.data.xmzt.map((v) => {
              return v.zlc;
            })
          );
          let dataJsdj = this.jsdjTable.datas.map((v, index) => {
            return { name: this.jsdjTable.label[index], value: v };
          });
          this.jsdjTable.datas = dataJsdj;
          this.maxCity = maxCity;
          this.maxXmztGsze = maxXmztGsze || 0;
          this.maxXmztZlc = maxXmztZlc || 0;
          res.data.citys.forEach((v) => {
            v.projects = v.project;
            v.project = (v.project / maxCity) * 100;
          });
          res.data.xmzt.forEach((v) => {
            v.gsze = (v.gsze / maxXmztGsze) * 100;
            v.zlc = (v.zlc / maxXmztZlc) * 100;
          });
          this.cityTable = res.data.citys;
          this.xmztTable = res.data.xmzt;

          if (res.data.gsze > 10000) {
            this.money = "亿";
          } else {
            this.money = "万";
          }
          if (this.mapReady) {
            this.projectLine = [];
            this.getProjectLine(this.tableData.projectlistids);
          }
          this.initEcharts();
          this.$nextTick(() => {
            this.$forceUpdate();
          });
        }
      });
    }, 500),
    getProjectLine: function (ids) {
      // if (this.gisInstance.view.zoom >= 4) {
      var dom = document.querySelectorAll(".pulse");
      if (dom.length > 0) {
        dom.forEach((v) => {
          v.remove();
        });
      }
      if (ids == this.projectXmzt || !this.projectXmzt) {
        this.$get("api/index/getProjectLines", {
          project_id: ids,
          page: this.page,
        }).then((res) => {
          if (res.code == 200) {
            this.projectLine = this.projectLine.concat(res.data);
            if (this.gisInstance.view.zoom >= 4) {
              this.local(res.data, ids);
            }
            this.page++;
            this.getProjectLine(ids);
          }
        });
      }
      // } else {
      if (this.gisInstance.view.zoom < 4) {
        this.merge();
      }
      // }
    },
    merge() {
      if (this.gisInstance.view.zoom >= 4) {
        var dom = document.querySelectorAll(".pulse");
        if (dom.length > 0) {
          dom.forEach((v) => {
            v.remove();
          });
        }
        if (
          this.gisInstance.view.graphics.items.length <= 0 &&
          this.projectLine
        ) {
          this.local(this.projectLine, this.projectXmzt);
        }
        return;
        // this.search();
      }

      this.gisInstance.view.graphics.removeAll();
      this.cityTable.forEach((v) => {
        if (v.projects > 0) {
          var _this = this;
          var dom = document.getElementById("point" + v.adcode + "");

          var xx = parseFloat(v.lng);
          var yy = parseFloat(v.lat);
          // var dom = document.getElementById("point" + gs.uid + "");
          let pointAll = {
            x: xx,
            y: yy,
            spatialReference: {
              wkid: 3857,
            },
          };
          pointAll = _this.gisConstructor.webMercatorUtils.geographicToWebMercator(
            pointAll
          );
          var point1 = _this.gisInstance.view.toScreen(
            new _this.gisConstructor.Point(pointAll)
          );
          var { x, y } = point1;
          if (!dom) {
            dom = document.createElement("div");
            dom.className = "pulse";
            dom.id = "point" + v.adcode;
            dom.innerHTML = `<div class="puless" style="cursor: pointer;" onclick="setMapZooms(${xx},${yy})">${v.projects}</div>`;
            document.getElementById("viewDiv2").appendChild(dom);
          }
          dom.style = `left:${x}px;top:${y}px;background:${v.color};opacity: 0.8;width:${v.size}px;height:${v.size}px;`;
        }
      });
    },
    handleChange: function () {
      const checkedNodes = this.$refs["elcascader"].getCheckedNodes();
      let checkedNodes_new = checkedNodes.filter((v) => {
        return v.level == 1;
      });
      if (checkedNodes_new.length <= 1) {
        checkedNodes_new.forEach((v) => {
          if (v.level == 1) {
            this.level1 = v.value;
          }
        });
      } else {
        let newss = checkedNodes_new.filter((v) => {
          return v.value != this.level1;
        });
        this.level1 = newss[0] ? newss[0].value : null;
        this.selectleap = [newss[0].value];
      }
      this.gcdd_sj = this.level1;
      // this.selectleap[0][0] = this.level1;
      let a = this.selectleap
        .slice(1)
        .map((v) => {
          return v[1];
        })
        .join(",");
      this.gcdd_qx = a;

      // this.search();
    },
    elCascaderOnlick() {
      // let that = this;
      setTimeout(function () {
        document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
          el.onclick = function () {
            this.previousElementSibling.click();
            // that.$refs.elcascader.dropDownVisible = false;
          };
        });

        // document
        //   .querySelectorAll(".el-cascader-panel .el-radio")
        //   .forEach(el => {
        //     el.onclick = function() {
        //       // that.$refs.elcascader.dropDownVisible = false;
        //     };
        //   });
      }, 100);
    },
    lazyLoad(node, resolve) {
      if (node.level == 1) {
        //编辑或查看时获取县的数据

        this.$get("api/project/getDistrict", { code: node.data.adcode }).then(
          (res) => {
            if (res.code == 200 && res.data) {
              this.District = res.data;
              this.District.map((v) => {
                return (v.leaf = node.level >= 1);
              });
              let selectleap = this.selectleap;
              resolve(res.data);
              this.$nextTick(() => {
                this.selectleap = selectleap;
              });
              // this.elCascaderOnlick();
            }
          }
        );
      } else {
        resolve(null);
      }
    },
    close1() {
      this.dialogFormVisible1 = false;
    },
    blackClick() {
      this.gisInstance.view.graphics.removeAll();
      this.dialogFormVisible = false;
    },
    local(resultData, ids) {
      //路段循环bug 当新请求成功时会更新点位， 当大循环完成时 会覆盖新请求的点位
      let centerOut;
      var that = this;
      if (this.page == 1) {
        // this.gisInstance.view.graphics.removeAll();
      }
      if (ids != this.projectXmzt) return;
      if (!resultData.length) return;

      resultData.forEach((v) => {
        let line = v.lines;
        // let xmzt = v.project.xmzt;

        // var pc = line.paths[0];
        var start = line[0]; //起点坐标
        var end = line[line.length - 1]; //止点坐标
        var center; //中心点坐标
        var arrowStartIndex, arrowEndIndex;

        if (line.length % 2 == 0) {
          arrowEndIndex = Math.round(line.length / 2);
          arrowStartIndex = Math.round(line.length / 2 - 1);
          var extent = new this.gisConstructor.Extent(
            line[arrowStartIndex][0],
            line[arrowStartIndex][1],
            line[arrowEndIndex][0],
            line[arrowEndIndex][1],
            new this.gisConstructor.SpatialReference({ wkid: 3857 })
          );
          center = [extent.center.x, extent.center.y];
        } else {
          arrowEndIndex = Math.round(line.length / 2 + 1);
          arrowStartIndex = Math.round(line.length / 2 - 1);
          center = line[Math.round(line.length / 2)];
        }

        var startPoint = {
          geometry: {
            type: "point",
            x: start[0],
            y: start[1],
            spatialReference: { wkid: 3857 },
          },
          symbol: {
            type: "picture-marker", // autocasts as new PictureMarkerSymbol()
            url: that.imgs2,
            width: "10px",
            height: "10px",
          },
          // symbol: {
          //   color: [255, 0, 0],
          //   size: 6,
          //   type: "simple-marker",
          // },
        };

        var endPoint = {
          geometry: {
            type: "point",
            x: end[0],
            y: end[1],
            spatialReference: { wkid: 3857 },
          },
          symbol: {
            type: "picture-marker", // autocasts as new PictureMarkerSymbol()
            url: that.imgs,
            width: "10px",
            height: "10px",
          },
        };
        let color = "#4A8DFC";

        // if (xmzt == "未开工") {
        //   color = "#A88F36";
        // }
        // if (xmzt == "交工") {
        //   color = "#FE8E16";
        // }
        // if (xmzt == "新建") {
        //   color = "#3CC24C";
        // }
        // if (xmzt == "续建") {
        //   color = "#F016FE";
        // }
        // if (xmzt == "竣工") {
        //   color = "#4A8DFC";
        // }
        var lineGraphic = {
          geometry: {
            type: "polyline",
            paths: [line],
            spatialReference: { wkid: 3857 },
          },
          symbol: {
            type: "simple-line",
            color: color,
            width: 4,
          },
          attributes: {
            bd_id: v.bd_Id,
            x: center[0],
            y: center[1],
            project: v.project,
            bd: v.bd,
          },
        };

        lineGraphic.geometry = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
          lineGraphic.geometry
        );

        startPoint.geometry = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
          startPoint.geometry
        );

        endPoint.geometry = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
          endPoint.geometry
        );

        var gStart = new this.gisConstructor.Graphic(startPoint);
        var gEnd = new this.gisConstructor.Graphic(endPoint);
        var graphic = new this.gisConstructor.Graphic(lineGraphic);

        this.gisInstance.view.graphics.add(graphic);
        this.gisInstance.view.graphics.add(gStart);
        this.gisInstance.view.graphics.add(gEnd);
        centerOut = center;
      });
      this.gisInstance.point = new this.gisConstructor.Point({
        longitude: centerOut[0],
        latitude: centerOut[1],
      });
      // this.gisInstance.view.goTo({
      //   target: this.gisInstance.point,
      //   zoom: 5,
      //   speedFactor: 6,
      //   easing: "linear"
      // });
    },

    init() {
      let url = "http://121.89.201.182:6080/";
      loadCss("https://js.arcgis.com/4.15/esri/themes/light/main.css");
      loadModules(this.gisModules, this.options).then((res) => {
        for (var i in res) {
          var name = this.gisModules[i].split("/").pop();
          this.gisConstructor[name] = res[i];
        }
        //获取Token
        var serverInfo = this.gisConstructor.ServerInfo();
        var identityManager = this.gisConstructor.IdentityManager;

        serverInfo.serverString = url + "arcgis/rest/services"; //这里配置ArcGIS Server的REST服务地址
        serverInfo.tokenServiceUrl = url + "arcgis/tokens/generateToken"; //由于GIS Server和Portal联合了，所以使用Portal的token生成地址
        var userInfo = { username: "zzUser", password: "gis_1234" }; //这里填写Portal的用户和密码
        identityManager.generateToken(serverInfo, userInfo).then(
          (data) => {
            // This is called when the promise resolves
            var tokenValue = data.token;
            this.token = data.token;
            //注册Token，注册之后，在Portal里的所有资源，只要该用户由权限访问，就可以直接使用，之前的所有安全服务请求都将会把token值作为参数发送到服务器端
            identityManager.registerToken({
              server: url + "arcgis/rest/services",
              token: tokenValue,
            });
            loadModules(this.gisModules, this.options).then(this.loadMap);
          },
          function (error) {
            // This function is called when the promise is rejected
            console.log(error); // Logs the error message
          }
        );
      });
    },
    //初始化地图
    loadMap(res) {
      for (var i in res) {
        var name = this.gisModules[i].split("/").pop();
        this.gisConstructor[name] = res[i];
      }
      // this.gisConstructor.urlUtils.addProxyRule({
      //   urlPrefix: this.$map, //配置文件proxy.config中的地址,要请求的地址
      //   proxyUrl: this.$proxy + "/DotNet/proxy.ashx", //部署的代理文件地址
      // });
      this.layersInstance.bgLayer = new this.gisConstructor.TileLayer({
        url: this.bgUrl,
      });
      this.layersInstance.layer = new this.gisConstructor.MapImageLayer({
        url: this.layerUrl,
      });

      this.gisInstance.map = new this.gisConstructor.Map({
        spatialReference: {
          wkid: 3857,
        },
      });

      this.gisInstance.view = new this.gisConstructor.MapView({
        container: "viewDiv2",
        spatialReference: {
          wkid: 3857,
        },
        center: [130.63, 48.75],
        constraints: {
          rotationEnabled: false, //禁止旋转
        },
        zoom: 2,
        map: this.gisInstance.map,
      });
      this.gisInstance.map.add(this.layersInstance.bgLayer);
      this.gisInstance.map.add(this.layersInstance.layer);

      //======================================
      this.UIInstance.zoom = new this.gisConstructor.Zoom({
        viewModel: {
          view: this.gisInstance.view,
        },
      });

      this.UIshow();
      // this.popupMap();
      this.gisInstance.view.when(this.pointerUpLocation);
    },
    UIshow() {
      this.gisInstance.view.ui.remove("attribution"); //移除底部ESRI logo
      this.gisInstance.view.ui._removeComponents(["zoom"]); //移除默认ui
    },
    pointerUpLocation() {
      this.gisInstance.view.on("click", (event) => {
        this.gisInstance.view.hitTest(event).then(this.popup);
      });
      this.mapReady = true;
      this.getProjectLine(this.tableData.projectlistids);
      // this.$get("api/index/getProjectLines", {
      //   project_id: this.tableData.projectlistids,
      // }).then((res) => {
      //   if (res.code == 200) {
      //     this.local(res.data);
      //   }
      // });
      this.gisConstructor.watchUtils.when(
        this.gisInstance.view,
        "extent",
        // this.animation,
        this.merge
      );
      this.gisConstructor.watchUtils.when(
        this.gisInstance.view,
        "extent",
        this.poptemplate
      );
      this.items = this.gisInstance.view.graphics.items;
    },
    popup(response) {
      let that = this;
      if (response.results.length) {
        let results = response.results;
        let result = results.filter((v) => {
          return v.graphic.geometry.type == "polyline";
        });
        if (!result.length) return;
        let center = result[0].graphic.attributes;
        this.gisInstance.view.graphics.items = this.gisInstance.view.graphics.items.filter(
          (v) => {
            return !("attr" in v);
          }
        );
        var dom = document.querySelectorAll(".pulse");
        if (dom.length > 0) {
          dom.forEach((v) => {
            v.remove();
          });
        }
        var div = document.querySelectorAll(".poptemplate");
        if (div.length > 0) {
          div.forEach((v) => {
            v.remove();
          });
        }
        this.xmmc = center.project.xmmc;
        let bd_id = result[0].graphic.attributes.bd_id;
        that.createBox(center.project, bd_id);
        // that
        //   .$get("/api/QqBdgl/one", {
        //     bd_id: bd_id,
        //   })
        //   .then((res) => {
        //     let data = res.data;
        //     this.item = res.data;

        //     let result = {
        //       xmmc: this.xmmc,
        //       bdmc: res.data.bdmc,
        //       zbj: res.data.zbj,
        //       bd_id: bd_id,
        //     };
        //     let reqs = [];
        //     reqs.push(
        //       this.$get("/api/enterprise/getInfo", { id: data.zbdw_id }).then(
        //         (res1) => {
        //           result.zbdw = res1.data.dwmc;
        //         }
        //       )
        //     );
        //     reqs.push(
        //       this.$get("/api/project/getUserIds", { id: data.xmjl_id }).then(
        //         (res2) => {
        //           result.xmjl_xm = res2.data[0].xm;
        //           result.xmjl_lxdh = res2.data[0].lxdh;
        //         }
        //       )
        //     );
        //     reqs.push(
        //       this.$get("/api/QqHtgl/getHtListByDbId", {
        //         bd_id: bd_id,
        //       }).then((res3) => {
        //         result.htje = res3.data[0].ht_je;
        //       })
        //     );
        //     Promise.all(reqs)
        //       .then(() => {
        //         var popPoint = {
        //           geometry: {
        //             type: "point",
        //             x: center.x,
        //             y: center.y,
        //           },
        //           symbol: {
        //             color: "rgba(255,255,255,0)",
        //             size: 0,
        //             type: "simple-marker",
        //           },
        //         };
        //         popPoint.geometry = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
        //           popPoint.geometry
        //         );
        //         var popGraphic = new this.gisConstructor.Graphic(popPoint);
        //         popGraphic.pop = {
        //           x: center.x,
        //           y: center.y,
        //         };
        //         popGraphic.attr = {
        //           x: center.x,
        //           y: center.y,
        //         };
        //         this.gisInstance.view.graphics.add(popGraphic);
        //         // console.log(1)
        //         // this.gisInstance.view.center = [center.x - 1, center.y];
        //         // this.gisInstance.view.zoom = 5;
        //         this.gisInstance.view.goTo({
        //           target: [center.x + 1, center.y],
        //           // target: [center.x, center.y],
        //           zoom: 5,
        //         });

        //         let title = this.createTitle("BD", result);
        //         // console.log(result);
        //         this.createGl(result);
        //         this.poptemplate(title);
        //         this.animation();
        //       })
        //       .catch(() => {
        //         var popPoint = {
        //           geometry: {
        //             type: "point",
        //             x: center.x,
        //             y: center.y,
        //           },
        //           symbol: {
        //             color: "rgba(255,255,255,0)",
        //             size: 0,
        //             type: "simple-marker",
        //           },
        //         };
        //         popPoint.geometry = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
        //           popPoint.geometry
        //         );
        //         var popGraphic = new this.gisConstructor.Graphic(popPoint);
        //         // console.log(center);

        //         // this.gisInstance.view.center = [center.x - 1, center.y];
        //         // this.gisInstance.view.zoom = 5;
        //         this.gisInstance.view.goTo({
        //           target: [center.x + 1, center.y],
        //           // target: [center.x, center.y],
        //           zoom: 5,
        //         });

        //         popGraphic.pop = {
        //           x: center.x,
        //           y: center.y,
        //         };
        //         popGraphic.attr = {
        //           x: center.x,
        //           y: center.y,
        //         };
        //         this.gisInstance.view.graphics.add(popGraphic);
        //         let title = this.createTitle("BD", result);
        //         // console.log(result);
        //         this.createGl(result);

        //         // console.log(2);
        //         this.poptemplate(title);
        //         this.animation();
        //       });
        //   });
      }
    },
    createGl(item) {
      this.gisInstance.view.graphics.remove(this.graphics);
      let line = item.lines;
      var color = "#F016FE";
      var lineGraphic = {
        geometry: {
          type: "polyline",
          paths: [line],
          spatialReference: { wkid: 3857 },
        },
        symbol: {
          type: "simple-line",
          color: color,
          width: 4,
        },
        attributes: {
          bd_id: item.bd_Id,
          x: item.lines[0][0],
          y: item.lines[0][1],
          project: item.project,
          bd: item.bd,
        },
      };

      lineGraphic.geometry = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
        lineGraphic.geometry
      );

      var graphic = new this.gisConstructor.Graphic(lineGraphic);

      this.gisInstance.view.graphics.add(graphic);
      this.graphics = graphic;
    },
    createBox(data, id) {
      var _this = this;

      // this.$refs.refName.click()
      // this.pointerUpLocation()
      this.$get("/api/index/getProjects", { id: data.id }).then((res) => {
        if (res.data.length > 0) {
          var dom = document.querySelectorAll(".pulse");

          if (dom.length > 0) {
            dom.forEach((v) => {
              v.remove();
            });
          }
          var div = document.querySelectorAll(".poptemplate");
          if (div.length > 0) {
            div.forEach((v) => {
              v.remove();
            });
          }

          var item = res.data[0];
          if (id) {
            res.data.forEach((v) => {
              if (v.bd_Id == id) {
                item = v;
              }
            });
          }
          this.item = item.bdinfo;
          this.xmmc = data.xmmc;

          // res.data.forEach((item) => {
          // _this.gisInstance.view.goTo({
          //   target: [item.lines[0][0], item.lines[0][1]],
          //   zoom: 5,
          // });

          this.gisInstance.view.graphics.items = this.gisInstance.view.graphics.items.filter(
            (v) => {
              return !("attr" in v);
            }
          );
          var result = {
            bd_id: item.bd_Id,
            bdmc: item.bdinfo.bdmc,
            xmmc: data.xmmc,
            zbdw: item.bdinfo.zb_dlgs,
            zbj: item.bdinfo.zbj,
            htje: item.ht[0] ? item.ht[0].ht_je : "",
            xmjl_xm: item.bdinfo.xmjl_obj ? item.bdinfo.xmjl_obj.xm : "",
            xmjl_lxdh: item.bdinfo.xmjl_obj ? item.bdinfo.xmjl_obj.lxdh : "",
          };

          var center = {
            x: item.lines[0][0],
            y: item.lines[0][1],
          };
          var popPoint = {
            geometry: {
              type: "point",
              x: center.x,
              y: center.y,
            },
            symbol: {
              color: "rgba(255,255,255,0)",
              size: 0,
              type: "simple-marker",
            },
          };
          popPoint.geometry = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
            popPoint.geometry
          );
          var popGraphic = new this.gisConstructor.Graphic(popPoint);
          popGraphic.pop = {
            x: center.x,
            y: center.y,
          };
          popGraphic.attr = {
            x: center.x,
            y: center.y,
          };
          this.gisInstance.view.graphics.add(popGraphic);
          this.gisInstance.view.goTo({
            target: [center.x + 1, center.y],
            // target: [center.x, center.y],
            zoom: 5,
          });

          let title = this.createTitle("BD", result);

          this.poptemplate(title);

          this.createGl(item);

          // });
        } else {
          _this.$mes({
            message: "未查找到路段信息",
            type: "error",
          });
        }
      });
    },
    createTitle(type, graphic) {
      var title = "";
      if (type == "BD") {
        title = `<div style='height:100%; width:100%;' class='popup_select' >
                          <div class="header">
                           <div class="hang">${graphic["xmmc"]}</div>
                               <i  onclick="closePop()" >×</i>
                           </div>
                           <div class="center">
                               <div class="hang">
                               <span>标段名称 : </span>
                               <span>${graphic["bdmc"] || "暂无数据"} </span>
                               </div>
                               <div class="hang">
                               <span>中标价 : </span>
                               <span>${graphic["zbj"] || "暂无数据"} 万元</span>
                               </div>
                               <div class="hang">
                               <span>合同金额 : </span>
                               <span>${
                                 graphic["htje"] || "暂无数据"
                               } 万元</span>
                               </div>
                               <div class="hang">
                               <span>中标单位 :</span>
                               <span>${graphic["zbdw"] || "暂无数据"} </span>
                               </div>
                               <div class="hang">
                               <span>项目经理及联系方式 : </span>
                               <span>${graphic["xmjl_xm"] || "暂无数据"}-${
          graphic["xmjl_lxdh"] || "暂无数据"
        } </span>
                               </div>
                           </div>
                           <div class="fotter">
                                 <span onclick="showForm('${
                                   graphic["bd_id"]
                                 }')">
                                查看详情
                              </span>
                          </div>
                          </div>`;
      }
      return title;
    },
    //点击添加点动画
    animation() {
      if (this.gisInstance.view.graphics.items.length > 0) {
        this.gisInstance.view.graphics.items.forEach((v) => {
          if ("attr" in v) {
            var xx = v.attr.x;
            var yy = v.attr.y;
            var dom = document.getElementById("point" + v.uid + "");
            let pointAll = {
              x: xx,
              y: yy,
              spatialReference: {
                wkid: 3857,
              },
            };
            pointAll = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
              pointAll
            );
            var point1 = this.gisInstance.view.toScreen(
              new this.gisConstructor.Point(pointAll)
            );
            var { x, y } = point1;

            if (!dom) {
              dom = document.createElement("div");
              dom.className = "pulse";
              // dom.className = "";
              dom.id = "point" + v.uid;
              document.getElementById("viewDiv2").appendChild(dom);
            }
            dom.style = `left:${x - 10}px;top:${y - 10}px`;
          }
        });
      }
    },
    poptemplate(value) {
      if (this.gisInstance.view.graphics.items.length > 0) {
        this.gisInstance.view.graphics.items.forEach((v) => {
          if ("pop" in v) {
            var xx = v.pop.x;
            var yy = v.pop.y;
            var div = document.getElementById("pop" + v.uid + "");
            let pointAll = {
              x: xx,
              y: yy,
              spatialReference: {
                wkid: 3857,
              },
            };
            pointAll = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
              pointAll
            );
            var point1 = this.gisInstance.view.toScreen(
              new this.gisConstructor.Point(pointAll)
            );

            var { x, y } = point1;
            if (!div && typeof value == "string") {
              div = document.createElement("div");
              var div1 = document.createElement("div");
              var div2 = document.createElement("div");
              div2.className = "angle";
              div.id = "pop" + v.uid;
              div.className = "poptemplate";
              document.getElementById("viewDiv2").appendChild(div);
              div.appendChild(div1);
              div.appendChild(div2);
              div1.innerHTML = value;
            }
            if (div) {
              var height = div.offsetHeight;
              // div.style = `left:${x - 140}px;top:${y - 32 - height}px`;
              div.style = `left:${x + 20}px;top:${y + 30 - height}px`;
            }
          }
        });
      }
    },
    // initHome() {
    //   this.gcdd_sj = null;
    //   this.gcdd_qx = null;
    //   this.formField = {
    //     xmzt: [],
    //     lmlx: [],
    //     xzdj: []
    //   };
    //   this.isactive = 1;
    //   this.selectleap = [];
    //   // this.mapReady = true;
    // }
  },
  watch: {
    "store.state.iswinds": function () {
      this.is_qp = this.store.state.iswinds;
    },
    // store(e){
    //   console.log(e);
    // },
    items(news) {
      if (news.length == 0) {
        var dom = document.querySelectorAll(".pulse");
        if (dom.length > 0) {
          dom.forEach((v) => {
            v.remove();
          });
        }
        var div = document.querySelectorAll(".poptemplate");
        if (div.length > 0) {
          div.forEach((v) => {
            v.remove();
          });
        }
      }
    },
    formField: {
      handler() {
        this.$nextTick(() => {
          this.search();
        });
      },
      deep: true,
    },
    selectleap: {
      handler() {
        this.$nextTick(() => {
          this.search();
        });
      },
      deep: true,
    },
  },
  computed: {
    ztz() {
      if (this.tableData.gsze > 10000) {
        return this.tableData.gsze / 10000
          ? (this.tableData.gsze / 10000).toFixed(2)
          : 0;
      } else {
        return this.tableData.gsze ? this.tableData.gsze.toFixed(2) : 0;
      }
    },
  },
};
</script>
<style lang="less">
.puless {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 12px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.citylist {
  /*
    * 可以实现不异步加载点击单选
    * 
    */
  // .el-cascader-panel .el-radio {
  //   width: 100%;
  //   height: 100%;
  //   z-index: 10;
  //   position: absolute;
  //   top: 10px;
  //   right: 10px;
  //   display: hidden;
  // }
  // .el-cascader-panel .el-radio__input {
  //   visibility: hidden;
  // }
  // .el-cascader-panel .el-cascader-node__postfix {
  //   top: 10px;
  // }

  label.el-radio {
    display: none !important;
  }
  .el-icon-arrow-right.el-cascader-node__postfix {
    width: 10%;
    float: right;
  }
}

.map-home {
  .two {
    .el-progress-bar {
      padding-right: 150px;
      margin-right: -150px;
    }
    .el-progress__text {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(35, 138, 245, 1);
      margin-left: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .progress-green {
    .el-progress__text {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgb(37, 184, 61);
      margin-left: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .one {
    .el-progress__text {
      font-size: 30px;
      font-family: DINSchrift;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
    }
  }
}
.progress {
  width: 100%;
  // float: right;
  .el-progress-bar {
    padding-right: 0 !important;
    .el-progress-bar__outer {
      height: 9.6px !important;
    }
  }
  .el-progress__text {
    display: none !important;
  }
}

.three-echart {
  .el-progress-circle {
    width: 107px !important;
    height: 107px !important;
  }
}
.tmain-home {
  .el-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .el-progress-bar {
    width: calc(100% - 107px);
  }
  .el-progress__text {
    display: block !important;
    color: #000 !important;
    font-size: 13px !important;
    width: 88px !important;
    text-align: right;
  }
}
</style>
<style lang="less" scoped>
.map-home {
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  margin: -20px;
  position: relative;
  overflow: hidden;
}
.select_screen {
  width: 100%;
  height: 50px;
  background: rgba(242, 243, 247, 1);
  span {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    margin: 0 10px;
  }
}
.viewDiv2 {
  width: 100%;
  height: calc(100% - 50px);
  // z-index: 10000;
  background: white;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.left_pop {
  position: absolute;
  top: 50px;
  left: 0;
  width: 320px;
  z-index: 98;
  background: #fff;
  height: calc(100% - 50px);
  // box-shadow: 0px 8px 10px 4px rgba(0, 118, 189, 0.54);
  // border-radius: 0px 10px 0px 0px;
  box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.3);
  transition: 1s;
  .searchs {
    padding: 10px;
    .box {
      background: #f1f3f7;
      border-radius: 10px;
      padding: 15px 11px;
    }
    .items {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .text {
        color: #000000;
        font-size: 12px;
      }
      input,
      select {
        width: 208px;
        height: 32px;
        background: #ffffff;
        border: 1px solid #dbdfe5;
        border-radius: 4px;
        padding-left: 5px;
        color: #000;
      }
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      .s {
        width: 70px;
        height: 32px;
        background: #3f9dff;
        border-radius: 4px;
        border: 1px solid #3f9dff;
        font-size: 13px;
        color: #fff;
        margin-right: 7px;
        cursor: pointer;
      }
      .c {
        width: 70px;
        height: 32px;
        background: #f3f3f5;
        border: 1px solid #dbdfe5;
        font-size: 13px;
        border-radius: 4px;
        margin-left: 7px;
        cursor: pointer;
      }
    }
  }
  .listbox {
    padding: 0 10px;
    height: calc(100% - 166px);
    overflow: auto;
  }
  .lbtn {
    text-align: right;
    position: absolute;
    right: -16px;
    width: 16px;
    height: 48px;
    background: #409eff;
    position: absolute;
    top: calc(50% - 24px);
    border-radius: 0px 8px 8px 0px;
    cursor: pointer;
    ::before {
      content: "";
      width: 9px;
      height: 9px;
      position: absolute;
      top: calc(50% - 7.5px);
      left: 5.5px;
      transform: rotate(45deg);
      border: 2px solid;
      border-color: transparent transparent #fff #fff;
    }
  }
  .show {
    ::before {
      left: -2px;
      border-color: #fff #fff transparent transparent;
    }
  }
  .close {
    font-size: 23px;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    text-align: center;
    margin: 10px 0;
    padding: 0;
    user-select: none;
    cursor: pointer;
  }
  .list {
    height: calc(100% - 30px);
    overflow-y: scroll;
    padding-top: 0;
    .item {
      position: relative;
      border-bottom: 1px dashed #999;
      // border-radius: 5px;
      padding: 10px 0;
      // margin-bottom: 5px;
      .title {
        font-size: 13px;
        font-weight: bold;
        margin-bottom: 7px;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        .status {
          background: rgb(253, 244, 228);
          color: rgb(254, 142, 22);
          font-size: 12px;
          padding: 0 10px;
          border-radius: 3px;
          margin-right: 5px;
        }
      }
      .desc {
        color: rgb(102, 102, 102);
        font-size: 12px;
        font-style: normal;
        span {
          display: inline-block;
          background: #eff1f5;
          border-radius: 3px;
          padding: 1px 10px;
        }
        .status {
          // padding: 0 10px;
          // margin-right: 10px;
          // color: white;
          // background: #409eff;
          // border-radius: 3px;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
          // max-width: 50%;
          // top: 2px;
          // position: relative;
          background: rgb(253, 244, 228);
          color: rgb(254, 142, 22);
          font-size: 12px;
          padding: 1px 10px;
          border-radius: 3px;
          margin-right: 5px;
        }
      }
      .dw {
        right: 0;
        bottom: 7px;
        position: absolute;
        text-align: right;
        margin-top: 5px;
      }
    }
  }
}
.right_pop {
  position: absolute;
  top: 50px;
  right: 0;
  width: 360px;
  height: calc(100% - 40px);
  background: rgba(255, 255, 255, 1);
  // box-shadow: -4px 0px 10px 0px rgba(0, 118, 189, 0.54);
  box-shadow: -2px 0px 18px 0px rgba(0, 0, 0, 0.3);
  // border-radius: 10px 0px 0px 0px;
  transition: 1s;
  .top_ {
    width: 100%;
    // height: 160px;
    position: relative;
    ._blue {
      width: 0;
      height: 0;
      // background: rgba(35, 138, 245, 1);
      // opacity: 0.9;
      // border-radius: 10px 0px 0px 0px;
    }
    ._white {
      height: 0;
      width: 0;
    }
    ._center {
      // position: absolute;
      // top: 50%;
      // left: 50%;
      // transform: translate(-209px, -52px);
      width: 100%;
      height: 80px;
      // background: rgba(255, 255, 255, 1);
      // box-shadow: 0px 0px 9px 0px rgba(133, 72, 0, 0.26);
      // border-radius: 10px;
      .data_tab {
        width: 33.33%;
        > div {
          text-align: center;
          &:first-child {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
          }
          &:last-child {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
          }
        }
      }
    }
  }
  .tab {
    // width: 100%;
    height: 32px;
    background: rgba(242, 243, 247, 1);
    border-radius: 4px;
    margin: 0 12px;
    // flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    > span {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(35, 138, 245, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 106px;
      height: 32px;
      cursor: pointer;
    }
    .active {
      width: 106px;
      height: 32px;
      background: rgba(35, 138, 245, 1);
      border-radius: 4px;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
    }
  }
  .main-home {
    width: 100%;
    height: calc(100% - 122px);
    padding: 10px 12px;
    overflow-y: scroll;
    .title {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      > i {
        width: 16px;
        height: 8px;
        background: rgba(2, 154, 255, 1);
        border-radius: 4px;
        margin-right: 10px;
        cursor: pointer;
      }
      span {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(2, 154, 255, 1);
        cursor: pointer;
      }
    }
    .main-charts {
      width: 100%;
      height: calc(100% - 30px);
      .lines {
        width: 100%;
        height: 70px;
        // padding: 10px;
        .left-t {
          width: 30%;
          i {
            width: 11px;
            height: 41px;
            margin-right: 5px;
            img {
              width: 11px;
              height: 41px;
            }
          }
        }
        > div {
          // display: flex;
        }
        > div > span {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(107, 132, 147, 1);
        }
        .nums {
          font-weight: 700;
        }
        .progress {
          width: 100%;
          // float: right;
          .el-progress-bar {
            padding-right: 0 !important;
            .el-progress-bar__outer {
              height: 9.6px;
            }
          }
        }
      }
      .one {
        height: 45px;
      }
      .two {
        .left-t {
          width: 20%;
          span {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
          }
        }
        .progress {
          width: 80%;
        }
      }
    }
    .first-echart {
      width: 100%;
      height: 260px;
    }
    .second-echart {
      width: 100%;
      height: 300px;
    }
    .four-echart {
      height: 300px;
    }
    .three-echart {
      height: 150px;

      .one {
        // width: 33.33%;
        display: inline-block;
        position: relative;
        .a {
          z-index: 99;
          border: 5px #fff solid;
          box-sizing: content-box;
          top: 68px;
          left: 9px;
          position: absolute;
          width: 76px;
          height: 40px;
          background: #ffffff;
          border-radius: 22px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #000000;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
        }
      }
    }
  }
  .justy {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.right_pops {
  right: -360px !important;
}
.chartshow {
  // color: #fff;
  position: absolute;
  // left: -50px;
  // top: 10px;
  // width: 50px;
  // height: 25px;
  // line-height: 25px;
  // background: #3996f6;
  // border-bottom-left-radius: 20px;
  // border-top-left-radius: 20px;
  // text-align: center;
  width: 16px;
  height: 48px;
  background: #409eff;
  position: absolute;
  // top: calc(50% - 20px);
  top: calc(50% - 24px);
  left: -16px;
  border-radius: 8px 0px 0px 8px;
  cursor: pointer;
  ::before {
    content: "";
    width: 9px;
    height: 9px;
    position: absolute;
    top: calc(50% - 7.5px);
    left: -2px;
    transform: rotate(45deg);
    border: 2px solid;
    border-color: #fff #fff transparent transparent;
  }
}
.chartshow2 {
  ::before {
    left: 7px;
    border-color: transparent transparent #fff #fff;
  }
}

.h0 {
  height: 0;
  display: none;
}
.jjh {
  position: absolute;
  left: -50px;
  bottom: 100px;
  width: 30px;
  height: 30px;
  background: #fff;
  box-shadow: 0px 1px 3px 0px rgba(12, 12, 12, 0.3);
  border-radius: 2px;
  user-select: none;
  cursor: pointer;
  div {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  img {
    width: 17px;
  }
}
.jjh2 {
  position: absolute;
  left: -50px;
  bottom: 30px;
  width: 30px;
  height: 60px;
  background: #fff;
  box-shadow: 0px 1px 3px 0px rgba(12, 12, 12, 0.3);
  border-radius: 2px;
  user-select: none;
  cursor: pointer;
  div {
    height: 30px;
    width: 20px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #ddd;
  }
  div:first-child {
    border-top: 0;
  }
  img {
    width: 14px;
  }
}
</style>